<template>
  <view class="page">
    <view class="container">

      <!-- 挂号记录列表 -->
      <view
          class="record-card"
          v-for="(record, index) in registrationRecords"
          :key="record.id"
      >
        <!-- 挂号时间和取消按钮 -->
        <view class="record-header">
          <view class="record-time">
            <text class="icon">⏰</text>
            <text>{{ record.time }}</text>
          </view>
          <button class="cancel-btn" @click="cancelRegistration(index)">取消</button>
        </view>

        <!-- 医院信息 -->
        <view class="hospital-info">
          <image class="hospital-avatar" :src="record.hospitalAvatar" mode="aspectFill"></image>
          <view class="hospital-details">
            <text class="hospital-name">{{ record.hospitalName }}</text>
            <text class="hospital-address">{{ record.hospitalAddress }}</text>
          </view>
        </view>

        <!-- 科室和医生信息 -->
        <view class="department-info">
          <text>科室：{{ record.department }}</text>
          <text>医师：{{ record.doctor }} </text>
        </view>

        <!-- 就诊人和日期 -->
        <view class="patient-info">
          <text>就诊人：{{ record.patientName }}</text>
          <text>就诊日期：{{ record.visitDate }}</text>
        </view>

        <!-- 金额和支付方式 -->
        <view class="payment-info">
          <text>金额：￥{{ record.amount }}</text>
          <text>支付状态：{{ record.orderStatus }}</text>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      registrationRecords: [],
    };
  },
  methods: {
    // 取消挂号记录
    cancelRegistration(index) {
      this.registrationRecords.splice(index, 1);
      uni.showToast({
        title: '订单已取消',
        icon: 'success',
      });
    },
    getRegistrationOrderList(){
      uni.request({
        url:'http://localhost:8080/app/registration/listRegistrationOrders',
        success:result => {
          if (result.statusCode==200){
            this.registrationRecords = result.data;
          }
        }
      })
    }
  },
  created() {
    this.getRegistrationOrderList()
  }
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  padding: 20rpx;
}

/* 挂号记录卡片 */
.record-card {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

/* 挂号时间和取消按钮 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-time {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.icon {
  margin-right: 10rpx;
  font-size: 30rpx;
}

.cancel-btn {
  padding: 10rpx 20rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 医院信息 */
.hospital-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10rpx;
}

.hospital-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.hospital-details {
  flex: 1;
}

.hospital-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.hospital-distance {
  font-size: 26rpx;
  color: #999;
  margin-top: 4rpx;
}

.hospital-address {
  font-size: 26rpx;
  color: #666;
}

/* 科室和医生信息 */
.department-info,
.patient-info,
.payment-info {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #555;
  margin-top: 10rpx;
}
</style>
